<template>
	<view>
		<view class="payall">支付总金额</view>
		<view class="box">
			<view class="price" v-if="price!=0">￥{{price}}</view>
			<view class="price" v-if="jifen!=0">{{jifen}}积分</view>
		</view>

		<view>
			<view class="item">
				<view class="item_left">
					<image style="width: 66rpx;" src="../../static/pay/zhifubao.png" mode="widthFix"></image>
				</view>
				<view class="item_middle">支付宝支付</view>
				<view class="item_right" @click="checkPay(2)">
					<image style="width: 40rpx;" v-if="payType==2" src="../../static/pay/zhifubao.png" mode="widthFix">
					</image>
					<image style="width: 40rpx;" v-else src="../../static/pay/quan.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="item">
				<view class="item_left">
					<image style="width: 66rpx;" src="../../static/pay/weixin.png" mode="widthFix"></image>
				</view>
				<view class="item_middle">微信支付</view>
				<view class="item_right" @click="checkPay(3)">
					<image style="width: 40rpx;" v-if="payType==3" src="../../static/pay/weixin.png" mode="widthFix">
					</image>
					<image style="width: 40rpx;" v-else src="../../static/pay/quan.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="item">
				<view class="item_left">
					<image style="width: 66rpx;" src="../../static/pay/yunbi.png" mode="widthFix"></image>
				</view>
				<view class="item_middle">余额支付</view>
				<view class="item_right" @click="checkPay(0)">
					<image style="width: 40rpx;" v-if="payType==0" src="../../static/pay/yunbi.png" mode="widthFix">
					</image>
					<image style="width: 40rpx;" v-else src="../../static/pay/quan.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="payfor" @click="$u.throttle(pay,1000)">确认支付</view>
		</view>
		<u-mask :show="show" @click="show = false" v-if="show==true">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="pad">请输入密码</view>
					<view class="je">支付金额{{price}}元</view>
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" @change="change" @finish="finish"
						:focus="true">
					</u-message-input>
					<view class="zwbtn" v-if="checkedpay==true" @click="zwpay">使用指纹支付</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		orderInfo,
		pay,
		paypassword
	} from "../../api/product.js"
	export default {
		data() {
			return {
				payType: null, //0:余额 1:积分 2：支付宝支付 3：微信支付 4：积分现金支付
				price: 0,
				orderid: '',
				jifen: 0,
				iscar: false,
				carlist: null,
				show: false,
				data: [],
				checkedpay: false
			}
		},
		onLoad(e) {
			console.log(e)
			if (e.iscar) {
				this.iscar = true
				let data = JSON.parse(e.orderid)
				this.data = data
				data.forEach(item => {
					this.price = this.price + item.totalPrice
					this.jifen = this.jifen + item.totalIntegral
				})
			} else {
				this.orderid = e.orderid
				this.getOrderInfo()
			}
		},
		onShow() {
			if (uni.getStorageSync("openpay") && uni.getStorageSync("openpay") == true) {
				this.checkedpay = true
			}
		},
		methods: {
			change(e) {
				console.log('内容改变，当前值为：' + e);
			},
			zwpay(){
				this.show = false
				// 开始指纹识别
				uni.startSoterAuthentication({
					requestAuthModes: ['fingerPrint'],
					challenge: '123456',
					authContent: '请验证本机指纹',
					success: (res) => {
						console.log('成功', res);
						if (res.errCode == 0) {
							this.yepay()
						}
					},
					fail: (res) => {
						console.log('失败', res);
						if (res.errCode == 90001) {
							this.msg('本设备不支持生物认证', 'none')
						}
						if (res.errCode == 90002) {
							this.msg('用户未授权使用该生物认证接口', 'none')
						}
						if (res.errCode == 90003) {
							this.msg('请求使用的生物认证方式不支持', 'none')
						}
						if (res.errCode == 90007) {
							this.msg('内部错误', 'none')
						}
						if (res.errCode == 90008) {
							this.msg('用户取消授权', 'none')
						}
						if (res.errCode == 90009) {
							this.msg('识别失败', 'none')
						}
						if (res.errCode == 90010) {
							this.msg('重试次数过多被冻结', 'none')
						}
						if (res.errCode == 90011) {
							this.msg('用户未录入所选识别方式', 'none')
						}
					},
					complete(res) {
						console.log('结束', res);
					}
				})
			},
			async finish(e) {
				console.log('输入结束，当前值为：' + e);
				this.show = false
				let res = await this.post(paypassword, {
					payPassword: e
				})
				this.yepay()
			},
			// 余额支付
			yepay() {
				if (this.iscar == true) {
					uni.showLoading({
						title: '支付中请稍后...'
					});
					let num = 0
					for (let i = 0; i < this.data.length; i++) {
						this.post(pay, {
							orderId: this.data[i].orderId,
							payType: this.payType
						}).then(res => {
							num++
							if (num == this.data.length) {
								console.log(num)
								uni.redirectTo({
									url: "/pages/order/orderlist?index=1"
								})
							}
						})
					}
				} else {
					uni.showLoading({
						title: '支付中请稍后...'
					});
					this.post(pay, {
						orderId: this.orderid,
						payType: this.payType
					}).then(res => {
						uni.redirectTo({
							url: "./orderinfo?orderid=" + this.orderid
						})
					})
				}
			},
			// 选择支付方式
			checkPay(e) {
				this.payType = e
			},
			// 获取订单信息
			async getOrderInfo() {
				let res = await this.get(orderInfo, {
					orderId: this.orderid
				})
				this.price = res.data.order.actualPrice
				this.jifen = res.data.order.actualIntegral
			},
			// 支付
			async pay() {
				if (this.payType == null) {
					this.msg("未选择支付方式", "none")
				} else {
					if (this.payType == 0) {
						if(uni.getStorageSync("user").isPay==true){
							this.show=true
						}else{
							this.showMd('请先到安全中心设置支付密码',()=>{})
						}
						return
					}
					uni.showLoading({
						title: '支付中请稍后...'
					});
					let data = {
						orderId: this.orderid,
						payType: this.payType,
						orderMoney: this.price.toFixed(2),
						actualIntegral: this.jifen
					}
					let res = await this.post(pay, data)
					if (this.payType == 3) {
						console.log("", JSON.stringify(res.data))
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: JSON.stringify(res.data), //微信订单数据
							success: (res) => {
								uni.redirectTo({
									url: "./orderinfo?orderid=" + this.orderid
								})
							},
							fail: function(err) {
								console.log('fail:', err);
							}
						});
					} else if (this.payType == 2) {
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.data.aliPayOrderStr, //支付宝订单数据
							success: (res) => {
								uni.redirectTo({
									url: "./orderinfo?orderid=" + this.orderid
								})
								console.log('success:', res);
							},
							fail: function(err) {
								console.log('fail:', err);
							}
						});
					}
				}
			}
		}
	}
</script>

<style scoped>
	.zwbtn {
		height: 66rpx;
		background-color: #F0812D;
		line-height: 66rpx;
		width: 400rpx;
		text-align: center;
		margin-top: 20rpx;
		border-radius: 20rpx;
		color: #FFFFFF;
	}

	.je {
		height: 37px;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 37rpx;
		color: #333333;
		opacity: 1;
		margin-top: 30rpx;
	}

	.pad {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 42rpx;
		color: #333333;
		opacity: 1;
	}

	.rect {
		/* width: 500rpx; */
		height: 390rpx;
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 40rpx;
	}

	.warp {
		display: flex;
		/* align-items: center; */
		justify-content: center;
		height: 100%;
		padding-top: 200rpx;
	}

	.box {
		display: flex;
		align-items: center;
		width: 750rpx;
		justify-content: center;
	}

	.payall {
		width: 190rpx;
		height: 53rpx;
		line-height: 53rpx;
		margin: 74rpx auto 0;
		font-size: 38rpx;
		font-weight: 400;
		color: #000000;
	}

	.price {
		width: 200rpx;
		height: 112rpx;
		font-size: 40rpx;
		font-weight: bold;
		line-height: 112rpx;
		color: #000000;
		text-align: center;
		margin-bottom: 60rpx;
	}

	.item {
		width: 610rpx;
		margin: 0 auto 65rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item_middle {
		width: 500rpx;
		height: 53rpx;
		line-height: 53rpx;
		font-size: 38rpx;
		font-weight: 400;
		color: #333333;
		padding-left: 40rpx;
	}

	.payfor {
		width: 610rpx;
		height: 88rpx;
		margin: 320rpx auto 0;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		background: linear-gradient(90deg, #F3C44E 0%, #F18D29 53%, #ED6138 100%);
		border-radius: 62rpx;
	}
</style>
